Knot lets you create large color pictures and animations of beautiful abstract knots. You design the knot’s form and colors, and choose the lighting, backgrounds, and motion.
What’s a knot?
The above picture is a knot, but it’s hard to describe – a knot is made of several strands, and a strand is a sort of swoopy, spirally, wiggly tube-like thing. “It looks like intestines” is the least queasily anatomical comment anyone’s ever made about a knot.
You can design knots, preview the results, and when you’re satisfied, render the final picture. Knot creates a fully shaded drawing and saves it directly to disk. To view the picture, you need a paint program capable of viewing 24-bit (millions of colors) TIFF files, like Photoshop or Color-It. To view movies, you'll need a QuickTime viewer: SimpleText, MoviePlayer, and Word 5.1a with its movie plug-in will all do the trick.
Is it really slow?
On a Color Classic, an average knot takes four or five minutes to draw; on a Power Mac, the same picture will take under a minute. Knot can run in the background, and you can control how much of your computer’s attention you’re willing to let it have. Previews are quickly available.
A movie with, say, a hundred frames, takes less time than a hundred still pictures.
But the wait is worth it: the resulting colorful pictures make pretty desktop backgrounds, and are even more fun to blow up into posters.
Are strands hard to design?
Not as hard as it first looks. At first, a strand design looks like The Parametric Equation That Ate Tokyo, but it’s all explained in this manual. All you have to say is how far the strand swings around the center, how much it bobs up and down across the equator, and how much its distance from the center wiggles in and out.
It turns out that if you choose these values cleverly, you can get surprisingly fancy strands. There are also example knots to check out, and the program can automagically generate strands for you.
The manual contains these sections:
• “Let me at it!”
• “Tell me more.”
• “What are the other controls?”
• “How do I make animations?”
• “I’m having trouble.”
• “What’s new in version 3.5?”
• “What else is there to know?”
Let me at it!
Not to waste your time, here’s the fastest possible explanation, which assumes you’re totally at ease with your Mac, with 3-D graphics, and with parametric equations expressed in spherical coordinates. Otherwise, skip to the “Tell me more” section of this manual.
Launch the program. An untitled window appears, containing one strand. (A picture of this window appears in the next part of the manual.)
The strand is represented by a little three-lobed icon in the scrolling list. The color of this icon is the color of the strand, but the shape is not. All strands have this same icon.
You can change the color of the strand by clicking in the Color swatch, or by double-clicking the strand. By moving those five sliders, or by checking the ‘glowing’ checkbox, you can change the appearance of the strand’s substance. A preview of the strand-substance is updated whenever you click the black square above the word “Previews.”
The basic shape of the strand is controlled by the bottom three rows of numbers, the ones with the red-and-gray icons. The top row, with the bluish icons, gives you variations on that shape.
First, the basic shape: W is the independent variable, and during drawing it ranges from 0 to pi; the sine functions work in radians; there are 2*pi radians in a complete circle. The sphere in the preview square is swept along the path defined by these equations, creating a strand.
There’s an equation for each of theta, radius, and phi. In this program, theta is the longitude; theta=0 lies in a direction that points away from you (at least, it does when the knot is untilted), and, seen from above the equator, theta increases in a clockwise direction.
Phi is the latitude. Where phi=0, the path is on the equator; phi=pi/2 puts the path at the north pole, and phi=-pi/2 puts it at the south pole.
The radius is expressed in pixels. It has a constant part, and a ‘wiggle’ part that’s a function of w. Phi works the same way, except that it’s an angle.
For both the radius and phi, the number in the first column is a constant offset. The second column is the magnitude of the wiggle; the third is a constant phase offset for the wiggle, and the fourth is the frequency of the wiggle. The higher this fourth number, the more wiggles.
Theta has no wiggle part – only a constant plus a linear function of w. (Wiggles in theta are less useful.)
The three ‘variation’ items in the first row with bluish icons beside them work this way:
The one on the left, by the triangle, is ‘segments.’ If you have a zero in this box, a strand will be drawn the normal way, as a curve made of several hundred straight-line segments. If you type a number 2 or greater, then the strand is drawn as that many straight-line segments, and you'll get some sort of polygon. Your number need not be an integer.
The middle item, next to the irregular blue shape, is ‘buckling’. A zero here gives you a normal smooth strand, and anything else gives you a wrinkled, distorted strand. (The amount of buckling is in pixels, the same as a strand's radius.) It's best to use buckling with a small number of segments, or else you get a mess. And if you option-click on the strand preview, that will make the strand buckle in a different way.
The third item, next to the three little balls arranged pawnshop-fashion, is ‘pearliness.’ Click this, and instead of a continuous strand, you get a bunch of individual spheres, one per segment. Again, this is best used with a small number of segments.
It’s OK to type large, negative, fractional, or otherwise weird numbers. If you type something that isn’t a number at all, though, the program will beep at you and highlight your mistake the next time you try to make a preview or a drawing.
You can tilt strands individually (rather than tilting the whole knot) by dragging the ball-like tilt controller. This makes the strand tip in the direction you indicate. To flip the indicator from the near side of the ball to the far side, or back, drag the mouse from inside the ball to outside, then back inside – as if you were swooping the tip of the line around the edge of the ball. Holding down the option key gives you a live preview of the strand, and pressing that tiny round button restores the orientation to straight up-and-down.
You can get a wireframe preview of your strand by clicking in the black square under the word ‘Previews’. If you click the pencil button, you get a preview of all the strands at once. This preview also has two little buttons to change the zoom level, and the dark gray rectangle shows where the edge of the picture is. If the knot doesn’t fit in that rectangle, that means the planned size of the drawing is too small. You can fix that in the Environment window, which is explained below, in the section “What other controls are there?”
You can make new strands – up to 100 – with the New Strand command in the Knots menu.
About copying and pasting: if you have some text selected, then Cut, Copy, and Clear will work on the text. If you have no text selected, then those commands work on the selected strand. If the whole set of strands (the keyframe) is selected, then that's what you'll be editing. Paste will paste whatever happens to be on the Clipboard.
There are more controls in the Environment window. And to finally draw a picture, use the Draw Knot window. Or…
See that list of strands? You can have as many sets as you like in a single document. Each set is called a ‘keyframe.’ You can make different strands in each keyframe, and later use the Animate Knot window to create a movie that morphs between keyframes. It's not really complicated, just fraught with details.
There are just a few things to know about making animations:
• The strand list in the main window has a little page-turn icon in it that flips you back and forth between keyframes (when you have more than one of them).
• To cut, copy, paste, or clear whole keyframes, choose Select Keyframe first.
• In the morphing, the each strand in a keyframe morphs into the strand in the same position in the list of the next keyframe.
• It’s okay to have successive keyframes with different numbers of strands. Knot will figure it out.
• If you get fancy, you may want your movie to have strands that just vanish or appear from nothing. For this reason, the placeholder strand was invented. Option-click on a strand to change it from normal to placeholder and back - the icon looks like a black outline. Placeholders do not draw, but they do hold their position in the list open.
To render a movie, use the Animate Knot window, which is explained later in the section titled “How do I make animations?”
Tell me more.
Designing your first strand
Launch Knot. You should see a window called ‘Untitled-1’. Click on the bottom black square at right, under the word ‘Previews’.
Well, that was easy. Your new strand is a simple ring: every time you create a new document, it will have one of these rings in it, just to get you started.
If you click in the square above the word ‘Previews’, you’ll see what the strand’s substance looks like. To change its color, click in the box marked ‘Color’ to bring up a color wheel. You can also get the color wheel by double-clicking on the little three-lobed icon in the scrolling list on the left. This little icon represents your strand – it has the right color, but not the right shape.
You can change the substance even more with the five sliders. ‘Wetness’ makes the strand look wet; ‘Iridescence’ gives the color a rainbow quality. ‘Roughness’ lets you choose a glossy or chalky surface. ‘Metallic Quality’ lets you add metallic glints, or just some variation of hue across the surface, and ‘Diameter’ controls the thickness of the strand. The checkbox by the blue halo makes a strand glow like neon. To see the effects of these changes, click in the top preview square.
You can tilt all the strands in a knot in different directions. Try dragging the mouse across the ‘Pole’s Tilt’ control to get a new tilt – hold down the option key to get live previews. The pole of this strand runs up and down through its center, like a pencil skewering a doughnut.
To flip the indicator from the near side of the ball to the far side, or back, drag the mouse from inside the ball, to outside, and then back inside – as if you were swooping the tip of the line around the edge of the ball.
When you’re finished experimenting, press that tiny round button above the big ball – it restores the orientation to straight up-and-down. This is the way you’ll want to leave this control, unless you want to make a really confusing knot.
Here’s the scoop on getting strand previews:
• Pressing Return or clicking the black square gives you a preview of the selected strand. Or, you can see all the strands at once by clicking the pencil button.
• The + and - buttons zoom the view in and out. Zoom out far enough, and you’ll see a dark gray rectangle which shows where the edge of the finished drawing will be. If your knot is too big to fit, you can make the drawing bigger or automatically shrink the knot using the Environment window, which is described later on.
• The view of the strand is tilted, even though its pole is supposed to be pointing straight up. That’s because there’s another orientation control that affects the whole knot, and it’s presently set at a slight angle. (It’s in the Environment window, explained later.)
…And a few words about editing:
• You can make new strands – up to a hundred – with the New Strand command in the Knots menu.
• If you have some text selected, then Cut, Copy, and Clear will work on the text. If you have no text selected, then those commands work on the selected strand. Select Keyframe will let you edit whole sets of strands – useful for animations, explained later in this manual. Confused? Check the names of the commands in the Edit menu – they’ll tell you what will happen next.
Shaping your strand
A strand is a path through space. When the knot is drawn, the sphere whose size and colors you chose slides all along this path, sweeping out the shape of the strand.
The shape of the path is described in terms of a variable called w; every point along the path has a particular value of w. At the start of the path, w equals zero. All along the path, w increases, up to pi (3.14159…) at the end of the path.
There are four rows of text boxes where you can type numbers; the bottom three rows, with the red-and-gray icons, define functions of w which define the shape of the path. The top row, with the blue icons, gives you variations on that shape.
Try changing these 'variation' items in the first row first:
The one on the left, by the triangle, is 'segments.' If you have a zero in this box, a strand will be drawn the normal way, as a curve made of several hundred very short straight-line segments. If you type a number 2 or greater, then the strand is drawn as that many straight-line segments, and you'll get some sort of polygon. Your number need not be an integer. Try a three, and click on the bottom preview. You should see a triangle. Adjust the tilt controller if that gives you a better view.
The middle item, next to the irregular blue shape, is 'buckling'. A zero here gives you a normal smooth strand, and anything else gives you a wrinkled, distorted strand. (The amount of buckling is in pixels, the same as a strand's radius.) It's best to use buckling with a small number of segments, or else you get a mess. And if you option-click on the strand preview, that will make the strand buckle in a different way.
The third item, next to the three little balls arranged pawnshop-fashion, is 'pearliness.' Click this, and instead of a continuous strand, you get a bunch of individual spheres, one per segment. Again, this is best used with a small number of segments.
Now for the bottom three rows defining the strand’s basic shape:
The first of these three rows is theta, the longitude. The next row of numbers is the radius, the distance from the knot’s center. The bottom row is phi, which is the latitude. (Theta and phi are Greek letters used to name angles.)
Go to the radius row, and change the second number from 0 to 100, and the fourth number from 0 to 16. Click the bottom preview square, and you should see something like figure 1, a sort of starburst shape seen from an angle.
To the basic radius of 150 pixels, you’ve added a wiggle of 100 * sin (16*w). Since a sine wave repeats after 2 pi, 16*w is enough to give you eight complete wiggles. And since a sine wave ranges from -1 to +1, the radius of this strand varies from 150-100 = 50 out to 150+100 =250. (If you want to see a sine wave all by itself, choose Sine Wave from the Windows menu.)
Try changing the third number in the radius row to 0.5, and click the bottom preview square. (Figure 2.) Now you’ve change the phase of the wiggle – the wiggles all take place slightly ahead of where they did before, and the result is that the whole thing appears to have spun a little. Experiment more if you like.
…OK, time to try to try something new. Get your original hoop back by setting the last three numbers in the radius row to zero. (Or create a new strand, using the command in the Knots menu.)
Starting with your simple hoop, try changing the phi row (the bottom row) to 0 + 0.1 pi * sin (0 pi + 14 w), and click the preview. You should get something like figure 3.
This is a lot like before when you added wiggles to the radius, only instead you’re adding wiggles to the latitude. Zero latitude is on the equator; +0.5 pi is at the north pole; -0.5 pi is at the south pole. So, 0.1 pi in the equation above is enough to make the wiggles go up and down a fifth of the way toward the poles. The 14*w in the sine part is enough to get you seven complete wiggles.
Now change the third number so that you have 0 + 0.1 pi * sin (0.5 pi + 14 w). Click the preview, and you should get figure 4. Like before, with the radius, you’ve changed the phase of the wiggles, and the whole strand seems to have spun.
Now, check the checkbox over the word ‘abs’ in the phi row. This will give you the absolute value of the whole sine-wave part: the positive part stays positive, but the negative part becomes positive too. Click on the preview; you can see that all the parts of the wiggle that used to be below the equator have been reflected above it. (Figure 5.)
One more thing: Change the first row, theta, to 0 + 1w. Now the strand will only go halfway around. (Figure 6.)
(By the way, the zero value of theta is a direction pointing away from you; seen from above the equator, theta goes clockwise as it increases.)
Something fancier
Remember, you are allowed to type large, negative, fractional, or otherwise weird numbers in your equation. If you type something that isn’t a number at all, though, the program will beep at you and highlight your mistake the next time you try to make a preview or a drawing.
Try this: start over with a new strand, a plain hoop. Change the radius to
80 +150 pi * sin (0 pi + 6 w); preview it. You’ll get figure 7. Because the size of the wiggle, 150, is larger than the constant part, 100, the radius is sometimes negative and passes through the center of the knot.
Leave the radius like it is, and change the phi row to 0+0.2*sin(0 pi + 12 w). You’ll get figure 8, where the strand is starting to look complicated. Now change the phi row to 0+0.6*sin(0 pi + 12 w). Now the latitude wiggle is more than large enough to take the strand through the north and south poles, like in figure 9.
There are many other things to try. For example, if theta is 0 + 4 pi, the strand will go twice around the center. If you then use an odd number times two for the frequencies of the wiggles, with a 0.5 pi offset for the phase of one of the wiggles, you can get a braided effect, as in figure 10.
Theta= 0 + 4w
Radius=200+25* sin(0.5pi + 22w)
Phi= 200+0.07* sin(0pi + 22w)
Here’s how to make any braid you want:
Let N be the number of ‘fibers’ in the braid - in the example above, it’s 2.
Let U be the number of undulations in each fiber - above, it’s 5.
Then fill in the strand definition like this:
Theta= 0 + Aw
Radius=? + ?* sin(0.5 pi + B w)
Phi= ? + ?* sin(0 pi + B w)
A=2*N
B=2*U*N+2, and you get to choose the rest.
Experiment! You can check out the strands in the example knot files, and edit automagical strands, but the only real way to learn these controls is to try numbers at random and see what happens. If you use the same number of wiggles in both the radius and phi, you will get uniform, symmetrical strands. If you use different but related numbers, like 4 and 8, or 3 and 12, you’ll get something more interesting. Best of all are strands with large wiggles that pass through the center like example 7, or past the poles like example 9.
Feel free to type strange, fractional, big, small, or negative numbers wherever you like. The only thing to beware is making a strand that, for example, loops around thousands of times – Knot will draw it, but it will take forever.
What other controls are there?
The environment window
Several other windows are available from the Knots menu; choose Environment. This window gives you a tilt controller to change the tilt of the whole knot, so you can look at it from a different angle. There are controls for the directions, colors, and harshness of four lights – pick a color other than black to turn a light on.
There are two ways to control the brightness of the lights. You can get a dim light by choosing a dim color for it - for example, gray will give you a dim white light. The other way is the ‘gobo’ control: a gobo is a shaded mask placed in front of a light source to make it throw patterned shadows on a subject. Knot gives you a selection of gobos to put on light #2, and using one can give your knots a moody chiaroscuro look.
Make a point of toying with all the different lighting controls – the right lighting can completely change the appearance of your knots.
Other controls change the color of the ambient (directionless) light, the kind and colors of the backdrop, and the size of the finished picture. If you check the ‘Fit’ checkbox, then the knot will be crushed down to fit inside the size you’ve chosen.
The ‘Hi-Rez’ checkbox will cause the knot to be drawn at double resolution, 144 dots per inch; your computer will need lots of memory to do this.
Bear in mind that on a 256-color monitor, the backdrop previews may not be especially accurate. If you don’t like any of the available backdrops, you can choose ‘Blank,’ create a mask for the knot using the Draw Knot options, and later use a paint program to substitute your own background.
The magic knot window
This window creates strands automagically instead of providing fine control. Simply check off the kinds of strands you want, say how many, and click ‘Make.’
If you want to create new keyframes for an animation, use the Keyframes slider to say how many.
The strands you get will probably make a fairly cluttered knot; it’s up to you to winnow what you get until you like the result.
The notes window
This is a place to write some commentary about your knot.
The sine wave window
This shows a little graph of a sine wave, just as a convenience.
The drawing window
At last, you get to draw your knot. If you want the fastest drawing possible, push the slider way up to ‘Monopolize Computer.’ If you are less rushed, and want to use some other program while drawing takes place, push it way down to ‘Cooperate and Run Slower.’
The ‘3-D’ checkbox will make the program draw a stereogram instead of the usual flat color picture. ‘Mask’ will create a black-and-white mask image, whose name will be the same as the main picture but with ‘.M’ stuck on the end. If you have both 3-D and Mask checked, then you get right and left masks, called ‘.RM’ and ‘.LM’.
(The masks contain silhouettes of the non-glowing strands only. To composite a knot with glowing strands on your custom background, here's what to do:
• Render the knot on a black backdrop.
• Using your paint program, superimpose the knot picture on your custom background using color addition.
• Then use the mask image to superimpose just the opaque strands using color replacement.)
If you use Draw Knot with a knot with more than one keyframe, the current keyframe is the one that gets drawn.
Now click ‘Draw.’ You’ll be asked for a filename for the picture file, and then Knot will draw your picture while a progress meter tells you how it’s coming along. (And if you have not registered Knot, a little reminder appears.)
If none of this happens, check the hints in the section titled “I’m having trouble.”
The Preferences
Under the File menu is an item called Preferences, which lets you say what program Knot's graphics files belong to. Normally, Knot will create still picture documents that launch Photoshop when you double-click them, and movies that launch Popcorn. If you want to change that, then choose the the TIFF or Movies preferences menu item, and use the file selector box that appears to pick out the program you want to use. You can also pick out a document that already belongs to that program.
There are also 3-D preferences. Knot can make two kinds of 3-D pictures: red-and-blue (“anaglyphic”) images that you view with colored glasses, and full-color stero image pairs. You can say which kind you want by using the 3-D preferences. You can also decide whether to use the green channel in the anaglyphic pictures.
When you make stereo pairs, the image or movie for the right eye will have “.R” on the end of its filename, and should be placed on the left for viewing.
How do I make animations?
There are two ways to make animations:
• You can take an ordinary knot and just make it spin. To do this, use the Animate Knot window to set the spin speed.
• Far more interestingly, you can design several different sets of strands, called ‘keyframes,’ in a single Knot document. The resulting knot animation will morph automatically through each keyframe.
To make a morphing animation, go to the main strand-editing window. (The Windows menu will find it for you quickly.) Choose New Keyframe from the Knots menu, and the program will insert a new keyframe right after the one you were just on. At the bottom of the strand list should be the numbers 2/2, meaning “this is the second of two keyframes in this document.” There’ll also be a page-turn icon that lets you flip backwards and forwards through all of your keyframes. You can have as many keyframes as you like.
If you choose Select Keyframes from the Edit menu, then you can cut, copy, paste, and clear whole keyframes.
To design your animation, just create new strands in each keyframe. Each strand will morph into the strand in the same position in the list in the following keyframe. For example, the first strand in one keyframe will turn into the first strand in the next, so you’ll want to keep all your strands in the right order.
If you have two successive keyframes with different numbers of strands, that’s okay. During the animation, extra old strands will fade away, and extras new strands will fade in.
If you want to have strands in the middle of the list fade in or out like this, and you don’t want to disturb the order of the list, then you can use a placeholder. A placeholder strand doesn’t draw anything, but it holds a place in the list open. To change a strand to a placeholder and back, option-click on it - its icon will be a black-and-white outline.
There are a couple of ways to auto-create keyframes. New Keyframe from the Knots menu inserts an empty keyframe after the current one, and Blend Keyframes creates a blend between the current keyframe and the next one, and inserts it after the current one. A 10% blend means, "Use 90% of this keyframe and 10% of the next one." (An interpolated keyframe might have more strands than you expect, because some kinds of dissimilar strands need two strands to blend.)
Another way is to go to the Magic Knot window and set the Keyframes slider to some number bigger than zero, and the Strands slider to some low number. Click Make, and you’ll have a simple animation ready to render.
The Animate Knot window
This is where you get to produce a finished QuickTime movie. This window is like the Draw Knot window with extra controls:
On the left you get to say how many frames you want in your movie, the frame rate, and how fast you want the knot to spin on its axis during the movie. Near the bottom is a display saying how many spins and how many seconds of movie will result from your choices.
The movie size control lets you conserve disk space and improve the playback speed by making a movie 1/2, 1/4, or 1/8 of the usual size.
There are three checkboxes over on the right, beneath the Go button:
‘Test’ makes the program draw a quick wireframe preview of the movie, rather than slowly generating the fully shaded version.
‘3-D’ will give you a 3-D movie.
‘Loop’ lets you make a looped movie. Imagine your knot has 4 keyframes, and you are making an un-looped movie. The first keyframe would be the beginning of the movie, the next two would fall 1/3 and 2/3 of the way through, and the last keyframe would be the end of the movie. You would have 3 intervals of interpolation between keyframes.
If you turn Loop on, then the movie gets another final interval, where the last keyframe blends back into the first. This way, the two ends of the movie are identical and you can later view the movie in looped playback without there being any motion jumps.
You can even animate a knot that has only one keyframe, if you want. Just set the spin rate, and you’ll get a twirling knot. And if you make a looped movie, be sure to choose a spin rate that gives you whole-number of spins. If there’s a fraction, the motion will be jumpy.
When you’re satisfied with the settings, click Go. You’ll have to name the movie, and next you’ll see a QuickTime compression options dialog, offering you a choice of tradeoffs between picture quality and the movie’s file size. If you’re making a 3-D movie, you should choose high picture quality to keep the colors pure and the 3-D effect intact.
After the movie has finished drawing, you can play it back with any movie-playing program, including SimpleText.
